<!--
 * @Description:: 请补充填写
 * @Version: 请配置版本号
 * @Author: xiaobai
 * @Date: 2021-06-11 15:34:25
 * @LastEditors: smallWhite
 * @LastEditTime: 2024-09-20 20:12:54
 * @FilePath: /huizhou_website/src/views/information/components/recruitmentdetails.vue
-->
<template>
  <div class="news_content">
    <img v-if="loading"
      src="../../../assets/imgaes/loading.7.gif"
      style="height:300px;margin: 0 auto;display: block;">
    <div class="news_details"
      v-else>
      <div class="news_title">
        {{details.title}}
        <div
          class="title_times">
          发表时间：{{details.times}}
        </div>
      </div>
      <div
        class="news_detail_content"
        v-html="details.content">
      </div>
      <div
        class="news_detail_content"
        v-if="!details.fileUrl || details.fileUrl != '[]'">
        <div>下载附件:</div>
        <div
          style="padding-left: 30px;">
          <ul
            v-if="details.fileUrl">
            <li
              style="padding: 5px 0;"
              @click="downLoad(item)"
              v-for="(item,index) in JSON.parse(details.fileUrl)"
              :key="index">
              <span
                class="link_span">
                <i
                  class="el-icon-document"></i>
                {{item.name}}
              </span>
              <!-- <el-button
                style="margin-right: 20px;"
                type="primary"
                size="mini"
                @click="downLoad(item)">下载</el-button>
              <a :href="item.url"
                target="_blank"
                download>{{item.name}}</a> -->

            </li>
          </ul>
        </div>
      </div>
      <div @click="goPage()"
        class="news_btn news_btn_btn">
        <span
          class="news_btn_span">返回列表&gt;&gt;</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      loading: false,
      details: {},
      id: ''
    }
  },
  mounted() {
    this.getNews()
  },
  methods: {
    downLoad(data) {
      console.log(data, '000')
      const a = document.createElement('a')
      // 这里是将url转成blob地址，
      fetch(data.url) // 跨域时会报错
        .then(res => res.blob())
        .then(blob => {
          // 将链接地址字符内容转变成blob地址
          a.href = URL.createObjectURL(blob)
          a.download = data.name // 下载文件的名字
          document.body.appendChild(a)
          a.click()
          //在资源下载完成后 清除 占用的缓存资源
          window.URL.revokeObjectURL(a.href)
          document.body.removeChild(a)
        })
    },

    getNews() {
      this.loading = true
      axios
        .post('/home/news/info', {
          id: this.$route.query.id
        })
        .then(res => {
          this.loading = false
          this.details = res.data.data.news
          this.details.times = this.details.time.substring(0, 10)
        })
    },
    goPage() {
      this.$router.push({
        path: '/recruitment'
      })
      this.$store.commit('setPathIndex', '/recruitment')
    }
  }
}
</script>

<style>
.news_btn_btn {
  float: inherit;
}
.news_content .news_details .news_btn.news_btn_btn .news_btn_span {
  margin: 20px auto !important;
}
.news_detail_content p img {
  display: inline !important;
  max-width: 660px !important;
}
.news_detail_content p a {
  margin: 0 2px;
  color: #409eff !important;
  text-decoration: underline !important;
}
.link_span {
  cursor: pointer;
  text-indent: 0;
  margin-left: 20px;
  color: #409eff;
  line-height: 20px;
  border-bottom: 1px solid #409eff;
}
</style>